<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>张繁荣</h1>
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-gl.js"></script>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {},
        visualMap: {
          show: false,
          dimension: 2,
          min: -1,
          max: 1,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
        },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid3D: {},
    
        series: [
          {
            type: "line3D",
            data: [
              [4, 0, 6],
              [1, 1, 4],
              [3, 2, 5],
              [4, 0, 6],
              [3, 2, 6],
              [2, 2, 2],
              [3, 0, 2],
              [4, 1, 5],
              [5, 2, 5],
            ],
          },
        ],
        xAxis3D: {
          //横坐标
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis3D: {
          type: "category",
        },
        zAxis3D: {
          type: "value",
        },
        grid3D: {
          boxWidth: 200,
          boxDepyh: 20,
          axisPointer: {
            show: false,
          },
          light: {
            main: { intensity: 1.2 },
            ambient: { intensity: 0.3 },
          },
          viewControl: {
            alpha: 10, //控制场景平移旋转
            beta: 20,
            minAlpha: 10,
            maxAlpha: 10,
            minBeta: 20,
            maxBeta: 20,
          },
        },
        
      };

      myChart.setOption(option);
    </script>
  </body>
</html>